<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="800px">
				<tr align="center" >
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>					
				</tr>
				<!-- 
									v-for表示循环遍历vue中的属性
									v-text 动态获取数据 如果没有解析,则不展现
								 -->
				<tr align="center" v-for="user in userList">					
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td ><button @click="deleteUserById(user.id)">删除</button></td>
					
				</tr>
				
			</table>
		</div>
			
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//axios.defaults.baseURL="http://localhost:8090"
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					userList: []
				},
				methods: {
					// add(){
					// 	alert("add函数被触发！！！")
					// }
				async findUser(){
					let {data:result}=await axios.get("/user/findAll")
					console.log(result)
					this.userList = result
					},
					
					 deleteUserById(id){ 
						//url: user/deleteUserById
					 axios.delete("/user/finddelete/"+id)
											alert("成功！")
											
					}
					// interUserById(id,name,age,sex){
					// 	axios.post("/user/findinsert/"+id+name+age+sex)
					// 						alert("更新")
					// }
					
				},			
				//生命周期函数 有系统自动调用 ，
				mounted(){//Vue 对象初始化成功 
					//this.add()
					this.findUser()
					this.deleteUserById()
				}
			})

		</script>
	</body>
</html>